<template>
	<view class="content">
		<Head class="head" />
		<Content />
		<view class="foot-btn">
			<view class="android btn-box">
				<image style="width: 50rpx; margin-right: 20rpx;" src="@/static/Android.png" mode="widthFix"></image>
				<view class="android-text text-box" @click="AndroidClick">
					<text style="font-size: 20rpx; margin-bottom: 4rpx;">{{$t('index.download')}}</text>
					<text style="font-size: 28rpx;">Android APK</text>
				</view>
			</view>
			<view class="ios btn-box" @click="IosClick">
				<image style="width: 50rpx; margin-right: 20rpx;" src="@/static/Ios.png" mode="widthFix"></image>
				<view class="ios-text text-box">
					<text style="font-size: 20rpx; margin-bottom: 4rpx;">{{$t('index.download')}}</text>
					<text style="font-size: 28rpx;">APP Store</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<text style="margin-bottom: 30rpx; font-size: 40rpx; font-weight: 700;">{{$t('api.message')}}</text>
				<text style="margin-bottom: 30rpx;">{{$t('api.message-title')}}</text>
				<view class="popup-btn" @click="dialogClose">
					{{$t('api.yes')}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Head from './head/head.vue';
	import Content from './content/content.vue';
	export default {
		name: 'download',
		components: {
			Head,
			Content
		},
		data() {
			return {
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				androidDownloadUrl: ''
			}
		},
		onLoad() {
			this.getApp();
		},
		methods: {
			IosClick() {
				this.$refs.popup.open()
			},
			dialogClose() {
				this.$refs.popup.close()
			},
			getApp() {
				uni.request({
					url: 'https://newapp.svchain.xyz/pocket/app/getApp',
					method: 'POST',
					success: (res) => {
						this.androidDownloadUrl = res.data.data.android_download_url
					}
				});
			},
			AndroidClick() {
				this.is_wx();
				
			},
			is_wx() {
				let en = window.navigator.userAgent.toLowerCase()
				// 匹配en中是否含有MicroMessenger字符串
				if (en.match(/MicroMessenger/i) == 'micromessenger') {
					uni.showToast({
						title: this.$t('index.download-message'),
						icon: 'none',
						duration: 3000
					});
				} else {
					window.open(this.androidDownloadUrl);
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 100rpx 0 200rpx 0;

		.head {
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			background-color: #fff;
		}

		.foot-btn {
			width: 100%;
			position: fixed;
			left: 50%;
			bottom: 50rpx;
			transform: translateX(-50%);
			display: flex;

			.btn-box {
				flex: 1;
				display: flex;
				align-items: center;
				border-radius: 16rpx;
				padding: 10rpx 24rpx;

				.text-box {
					display: flex;
					flex-direction: column;
					color: #fff;
				}
			}

			.android {
				margin: 0 6rpx 0 12rpx;
				background-color: #07c160;
			}

			.ios {
				margin: 0 12rpx 0 6rpx;
				background-color: #969696;
			}
		}
	}

	/deep/ .uni-popup__wrapper {
		position: relative;
		width: 50vw;
		padding: 30rpx 80rpx 80rpx 80rpx;
		text-align: center;
		border-radius: 20rpx;

		.popup-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.popup-btn {
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 0;
			left: 0;
			border-top: 1px solid #5a5a5a;
			padding: 16rpx 0;
		}
	}
</style>
